<!DOCTYPE html>
<html>
<head>
  <title>Configuration</title>
<style>
fieldset { border: none; margin: 10px; }
.col1 { width: 120px; }
.legend { border-bottom: 1px solid black; padding: 2px 0px; width: 100%; font-weight: bold; text-transform: uppercase; }
.center { text-align: center; }
</style>
<script>
var postFormDataAsJson = async({
  url,
  formData
}) => {
  const plainFormData = Object.fromEntries(formData.entries());
  const formDataJsonString = JSON.stringify(plainFormData);

  console.log("postFormDataAsJson() entered");

  const fetchOptions = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: formDataJsonString,
  };


  alert("about to post" + formDataJsonString)
  const response = await fetch(url, fetchOptions);

  if (!response.ok) {
    const errorMessage = await response.text();
    throw new Error(errorMessage);
  }

  return response.json();
}
var handleFormSubmit = async(event) => {
  event.preventDefault();
  const form = event.currentTarget;
  const url = form.action;

  console.log("handleFormSubmit() entered");

  try {
    const formData = new FormData(form);
    const responseData = await postFormDataAsJson({
      url,
      formData
    });
    console.log({
      responseData
    });
  } catch (error) {
    console.error(error);
  }
}
window.addEventListener("DOMContentLoaded", (event) => {
  const f = document.getElementById("update-form");
  if(f) {
    f.addEventListener("submit", handleFormSubmit);
  }
  else {
    console.log("null element");
  }
  console.log("Window loaded");
});
</script>
</head>

<body>
<form action="result.txt" id="update-form">
<fieldset>
  <div class="legend"> Wi-Fi settings </div>
  <table>
    <tr>
      <td class="col1" align="right"><label for="wifi_ssid">* SSID:</label></td>
      <td align="left"><input type="text" name="wifi_ssid" id="wifi_ssid" required minlength="4" maxlength="64"></td>
    </tr>
    <tr>
      <td align="right"><label for="wifi_pass">* Password:</label></td>
      <td align="left"><input type="text" name="wifi_pass" id="wifi_pass" required minlength="4" maxlength="64"></td>
    </tr>
  </table>
  <div class="legend">Broker settings</div>
  <table>
    <tr>
      <td class="col1" align="right"><label for="br_host">* Host Name:</label></td>
      <td align="left"><input type="text" name="br_host" id="br_host" required minlength="4" maxlength="128"></td>
    </tr>
    <tr>
      <td class="col1" align="right"><label for="br_port">* Port:</label></td>
      <td align="left"><input type="number" name="br_port" id="br_port" required min="0" max="65535"></td>
    </tr>
    <tr>
      <td align="right"><label for="br_userid">User ID:</label></td>
      <td align="left"><input type="text" name="br_userid" id="br_userid" minlength="4" maxlength="64"></td>
    </tr>
    <tr>
      <td align="right"><label for="br_username">User Name:</label></td>
      <td align="left"><input type="text" name="br_username" id="br_username" minlength="0" maxlength="64"></td>
    </tr>
    <tr>
      <td align="right"><label for="br_pass">Password:</label></td>
      <td align="left"><input type="text" name="br_pass" id="br_pass" minlength="0" maxlength="64"></td>
    </tr>
  </table>
  <div class="legend">MQTT Settings</div>
  <table>
    <tr>
      <td class="col1" align="right"><label for="config">* Configuration:</label></td>
      <td align="left"><input type="text" name="config" id="config" required placeholder="json"></td>
    </tr>
  </table>  
  <div class="legend">Update authorization</div>
  <table>
    <tr>
      <td class="col1" align="right"><label for="code">* Code:</label></td>
      <td align="left"><input type="text" name="code" id="code" required  minlength="8" maxlength="8"></td>
    </tr>
  </table>  
</fieldset>
<div class="center">
  <input text-align="center" type="submit" value="Update">
</div>
</form>
  </body>

  </html>
